<template>
	<view class="content">
		<view class="list">
			<template v-for="item in list" :key="item.cid">
				<view class="list-item">
					<!-- 勾选 -->
					<view class="checkbox" @click="toggleItemSelection(item.id)" style="cursor: pointer;">
						<!-- <svg v-if="selectedItems.includes(item.id)" width="20" height="20" viewBox="0 0 24 24"
							xmlns="http://www.w3.org/2000/svg">
							<circle cx="12" cy="12" r="10" fill="green" />
							<text x="12" y="16" font-size="12" fill="white" text-anchor="middle"
								alignment-baseline="middle">✔</text>
						</svg>
						<svg v-else width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<circle cx="12" cy="12" r="10" fill="none" stroke="gray" stroke-width="2" />
						</svg> -->
						<image v-if="selectedItems.includes(item.id)" class="check-icon"
							src="/static/img/fenlei-img/checked.png">
						</image>
						<image v-else class="check-icon" src="/static/img/fenlei-img/check.png"></image>
					</view>

					<img class="img" :src="item.imgUrl" alt="" @click.stop="goDetial(item.id)" />
					<view class="goods-name">
						<span class="tag">{{item.sellerType}}</span>
						<span class="name">{{item.name}}</span>
					</view>
					<view class="goods-state">
						<span class="green">{{item.sellSpecial}}</span>
						<span class="gray">{{item.sellSpeed}}</span>
					</view>
					<view class="goods-sales">
						<span class="price">
							<span>￥</span>
							<span>{{item.unitPrice}}</span>
						</span>
						<span class="sales">{{item.Selled}}</span>
					</view>
					<view @click.stop="confirmCancelFavorite(item)" class="star">
						<!-- <svg v-if="item.isFavorite" width="20" height="20" viewBox="0 0 24 24" fill="yellow"
							xmlns="http://www.w3.org/2000/svg">
							<path
								d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
						</svg>
						<svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="gray"
							xmlns="http://www.w3.org/2000/svg">
							<path
								d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
								stroke-width="2" stroke-linejoin="round" />
						</svg> -->
						<image v-if="item.isFavorite" class="collection" src="/static/img/fenlei-img/collection.png">
						</image>
						<image v-else class="collection" src="/static/img/fenlei-img/collection_fill.png"></image>
					</view>
				</view>
			</template>
		</view>
		<!-- 取消收藏弹窗 -->
		<view v-if="showCancelDialog" class="dialog">
			<view class="dialog-content">
				<view class="dialog-message">
					你不喜欢 {{currentItem?.name}}了吗？
				</view>
				<view class="dialog-buttons">
					<button class="cancel-btn" @click="closeDialog">取消</button>
					<button class="confirm-btn" @click="cancelFavorite">确定</button>
				</view>
			</view>
		</view>
		<!-- 底部购买栏 -->
		<view class="bottom-bar">
			<view class="total-price">
				总价: ￥{{ totalPrice.toFixed(2) }}
			</view>
			<button class="buy-btn" @click="purchase">购买</button>
		</view>
	</view>
</template>

<script>
	import {
		commodityList
	} from '@/utils/index';
	export default {
		name: 'Star',
		data() {
			return {
				// 生成4条数据，
				list: new Array(4).fill(null).map((_, index) => ({
					id: index + 1, // 根据数据条数生成递增的 id
					name: '馄饨先生爱吃水饺',
					sellerType: '旗舰店',
					sellSpecial: '先用后付',
					sellSpeed: '急速退款',
					Selled: '已售1000万+件',
					unitPrice: 16.8,
					isFavorite: true
				})),
				showCancelDialog: false, // 控制弹窗显示
				currentItem: null, // 当前选中的商品
				totalPrice: 0,
				selectedItems: [], // 存储选中的商品ID
				commodityList: commodityList, //商品列表
			}
		},
		computed: {
			// 计算选中商品的总价格
			totalPrice() {
				console.log("执行了操作")
				return this.selectedItems.reduce((sum, id) => {
					const item = this.list.find(item => item.id === id);
					return parseFloat(sum) + (item ? parseFloat(item.unitPrice) : 0)
				}, 0);
			},
		},
		onLoad() {
			this.initList()
		},
		methods: {
			// 打开取消收藏的提示框
			confirmCancelFavorite(item) {
				this.currentItem = item;
				this.showCancelDialog = true;
			},
			// 进入详情页
			goDetial(id) {
				uni.navigateTo({
					url: `/pages/details/details?id=${id}`
				})
			},
			// 取消收藏
			cancelFavorite() {
				if (this.currentItem) {
					// 将商品从列表中移除，此处只是单纯的前端移出，还需要调用接口
					this.list = this.list.filter(item => item.id !== this.currentItem.id);
					let starList = uni.getStorageSync('starList');
					starList = JSON.parse(starList); // 解析存储数据为 JSON
					starList = starList.filter(item => item.id !== this.currentItem.id); // 移除该商品
					uni.setStorageSync('starList', JSON.stringify(starList));
					this.showCancelDialog = false;
					this.currentItem = null;
				}
			},

			// 关闭弹窗
			closeDialog() {
				this.showCancelDialog = false;
				this.currentItem = null;
			},
			// 执行购买操作
			purchase() {
				if (this.selectedItems.length === 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none',
					});
					return;
				}
				// 模拟购买流程
				uni.showToast({
					title: `成功购买${this.selectedItems.length}件商品`,
					icon: 'success',
				});
				// 清空选中商品
				this.selectedItems = [];
			},
			calculateTotal() {
				this.totalPrice = this.list
					.filter(item => this.selectedItems.includes(item.id))
					.reduce((sum, item) => parseFloat(sum) + parseFloat(item.unitPrice), 0);
			},
			toggleItemSelection(id) {
				const index = this.selectedItems.indexOf(id);
				if (index > -1) {
					this.selectedItems.splice(index, 1);
				} else {
					this.selectedItems.push(id);
				}
				this.calculateTotal();
			},
			// 初始化数组
			initList() {
				let starList = uni.getStorageSync('starList');
				if (!starList) {
					starList = [];
				} else {
					starList = JSON.parse(starList);
				}
				console.log(starList)
				starList.forEach((x, i) => {
					this.commodityList.forEach((y, j) => {
						if (x.id == y.id) {
							x.imgUrl = y.imgUrl
							x.name = y.name
							x.cid = i + 1
							x.unitPrice = Number(y.price)
							x.sellerType = '旗舰店'
							x.sellSpecial = '先用后付'
							x.sellSpeed = '急速退款'
							x.Selled = '已售1000万+件'
							x.isFavorite = true
						}
					})
				})
				this.list = starList
			}
		}
	}
</script>

<style scoped>
	.content {
		box-sizing: border-box;
		height: calc(100vh - 50px);
		padding-bottom: 60px;
		background: #f4f4f4;
		overflow: auto;
	}

	.content .list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background: #f4f4f4;
		padding: 0 10px;
	}

	.content .list .list-item {
		background: #fff;
		border-radius: 5px;
		position: relative;
		width: 49%;
		margin-bottom: 10px;
	}

	.list-item .img {
		width: 100%;
		height: 150px;
		object-fit: contain;
	}

	.list-item .goods-name {
		display: flex;
		align-items: center;
		padding: 0 5px;
	}

	.list-item .goods-name .tag {
		background: #f4d59f;
		font-size: 12px;
		border-radius: 3px;
		margin-right: 5px;
	}

	.list-item .goods-name .name {
		flex: 1;
		font-size: 14px;
		word-break: break-all;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.list-item .goods-state {
		display: flex;
		align-items: center;
		font-size: 12px;
		padding: 0 5px;
		margin: 5px 0;
	}

	.list-item .goods-state .green {
		color: #4fb72f;
		margin-right: 5px;
	}

	.list-item .goods-state .gray {
		color: #ccc;
		margin-right: 5px;
	}

	.list-item .goods-sales {
		display: flex;
		align-items: center;
		font-size: 12px;
		padding: 0 5px;
	}

	.list-item .goods-sales .price {
		color: #e7402e;
		font-weight: bold;
		margin-right: 5px;
	}

	.list-item .star {
		position: absolute;
		right: 5px;
		bottom: 0;
	}

	.list-item .goods-sales .price>span:nth-child(2) {
		font-size: 15px;
	}

	.list-item .goods-sales .sales {
		color: #ccc;
	}

	.dialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.dialog-content {
		background: #fff;
		padding: 20px;
		border-radius: 10px;
		width: 80%;
		text-align: center;
	}

	.dialog-message {
		font-size: 16px;
		margin-bottom: 20px;
	}

	.dialog-buttons {
		display: flex;
		justify-content: space-around;
	}

	.dialog-buttons .cancel-btn {
		background: #ccc;
		color: #000;
		padding: 10px 20px;
		border-radius: 5px;
		border: none;
		font-size: 12px;
	}

	.dialog-buttons .confirm-btn {
		background: #e7402e;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
		border: none;
		font-size: 12px;
	}

	.checkbox-container {
		position: absolute;
		top: 5px;
		left: 5px;
	}

	.checkbox {
		width: 20px;
		height: 20px;
		cursor: pointer;
		position: absolute;
		left: 5px;
		top: 5px;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	}

	.total-price {
		font-size: 16px;
		color: #333;
	}

	.buy-btn {
		background: #e7402e;
		color: #fff;
		padding: 5px 20px;
		border-radius: 5px;
		font-size: 14px;
		position: absolute;
		right: 25px;
		top: 50%;
		transform: translateY(-50%);
	}

	.checkbox svg {
		display: inline-block;
		vertical-align: middle;
	}

	.checkbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.collection {
		width: 20px;
		height: 20px;
	}

	.check-icon {
		width: 20px;
		height: 20px;
	}
</style>